<template>
  <div class="topicList">
    <router-link to="/">
      <div 
        class="pic-box"
        v-if="productList.length > 0"
        v-for="(item,index) in productList"
        :key="index"
        >
        <div class="title">
          <h1>{{ item.topicTitle }}</h1>
          <div class="p-box">
            <p>{{ item.topicNum }}个话题</p>
            <p class="middle">|</p>
            <p>{{ item.peopleNum }}人热议</p>
          </div>
          <div class="img">
            <img :src="item.topicPic1" alt=""> 
            <img :src="item.topicPic2" alt=""> 
          </div>
        </div>
      </div>
      <div v-else>数据正在加载中...</div>
    </router-link>  
  </div>
</template>

<script>
export default {
  name:"TopicList",
  data(){
    return{
      productList:[],
      imgUrl1:require("../../assets/banner/banner_pic.png"),
      imgUrl2:require("../../assets/banner/banner_pic.png")
    }
  },
   mounted() {
    var that = this;
    var flag = true;
    this.$axios.get("http://localhost:3000/api/topics?count=2")
    .then(res => {
      console.log(res.data);
      this.productList = res.data; 
    })
    .catch(error => {
      console.log(new error(error))
    });
     window.addEventListener("scroll",function(){
      // console.log(document.documentElement.scrollTop);
      if(document.documentElement.scrollTop + window.innerHeight >= document.body.offsetHeight){
        if(flag==true){
          flag = false;
          that.$axios.get("http://localhost:3000/api/topics?count=2")
          .then(res => {
            // console.log(res.data);
            that.productList = that.productList.concat(res.data);
            flag = true;
          })
          .catch(error => {
            console.log(new error(error))
          });
        }
      }
    })
  },
  
}
</script>

<style scoped>
.topicList{
  margin-bottom: 70px;
}
.pic-box{
  width: 9.466rem;
  height: 6.13rem;
  background-color: #fff;
  margin-left: 0.267rem;
  margin-top: 0.4rem;
  box-shadow: 0.053rem 0.053rem 0.267rem rgba(0,0,0,0.1);
  border-radius: 0.134rem;
}
h1{
  width: 100%;
  text-align: center;
  font-size: 0.4rem;
  font-weight: normal;
  padding: 0.4rem;
  box-sizing: border-box;
  color: #636262;
}
.p-box{
  margin-left: 2.667rem;
  margin-top: -0.267rem;
}
.pic-box img{
  width: 3.9rem;
  height: 3.788rem;
  margin: 0.4rem 0.35rem;
  float: left;
}
.title p{
  float: left;
  font-size: 0.32rem;
  color: #888888;
}
.middle{
  margin: 0 0.267rem;
}
.img{
  margin-left: 0.14rem;
}
</style>